<template>
    <div id="container-login">
        <div id="login-label">
            <table>
                <tr>
                    <td
                        colspan="3"
                        style="
              height: 100px;
              font-size: 30px;
              border-bottom: 2px #5fbdee solid;
            "
                    >
                        <span style="font-weight: bold">用户注册</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 30%; font-weight: bold">
                        姓名:<span style="color: red">*</span>
                    </td>
                    <td>
                        <el-input
                            v-model="name"
                            placeholder="请输入姓名"
                            prefix-icon="el-icon-user-solid"
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; width: 30%; font-weight: bold">
                        用户名: <span style="color: red">*</span>
                    </td>
                    <td>
                        <el-input
                            v-model="username"
                            placeholder="请输入用户名"
                            prefix-icon="el-icon-user-solid"
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; font-weight: bold">密码: <span style="color: red">*</span></td>
                    <td>
                        <el-input
                            v-model="password1"
                            placeholder="请输入密码"
                            prefix-icon="el-icon-key"
                            show-password
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; font-weight: bold">确认密码: <span style="color: red">*</span></td>
                    <td>
                        <el-input
                            v-model="password2"
                            placeholder="请输入确认密码"
                            prefix-icon="el-icon-key"
                            show-password
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; font-weight: bold">联系方式: <span style="color: red">*</span></td>
                    <td>
                        <el-input
                            v-model="phone"
                            placeholder="请输入联系方式"
                            prefix-icon="el-icon-edit"
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; font-weight: bold">QQ:</td>
                    <td>
                        <el-input
                            v-model="qq"
                            placeholder="请输入QQ"
                            prefix-icon="el-icon-edit"
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td colspan="3" style="border-top: 2px #5fbdee solid">
            <span>
              <el-button type="primary" @click="register">注册</el-button>
            </span>
                        <span style="margin-right: -200px; margin-left: 100px">
              <el-link :underline="false" @click="toLogin" style="color: white"
              >返回登录</el-link
              >
            </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    var md5 = require('js-md5');
    export default {
        name: "Resgiter",
        data() {
            return {
                name: "",
                username: "",
                password1: "",
                password2: "",
                phone: "",
                qq: "",
            };
        },
        methods: {
            checkInfo() {
                let errMsg = '';
                this.name === '' ? errMsg += '姓名不能为空, ' : '';
                this.username === '' ? errMsg += '用户名不能为空, ' : '';
                this.password1 === '' ? errMsg += '密码不能为空, ' : '';
                this.password2 === '' ? errMsg += '确认密码不能为空, ' : '';
                this.phone === '' ? errMsg += '联系方式不能为空, ' : '';

                // 验证下密码的长度, 必须为数字和字母组合
                let patternNum = /\d+/;
                let patternAlphabet = /[a-z]+/i;
                let isOk = patternAlphabet.test(this.password1) && patternNum.test(this.password1) && this.password1.length >= 6
                if (!isOk) {
                    errMsg += '请输入 6 位及以上的数字和字母组合';
                }
                // 判断输入的密码是否一致
                if (this.password1 !== this.password2) {
                    errMsg = '两次密码不一致';
                }
                return errMsg;
            },
            register() {
                // 判断两次密码是否一致
                let errMsg = this.checkInfo();
                if (errMsg !== '') {
                    this.$message({
                        message: errMsg,
                        type: "warning",
                    });
                    return;
                }
                this.AXIOS.post("/api/register", {
                    name: this.name,
                    username: this.username,
                    password: md5(this.password1),
                    phone: this.phone,
                    qq: this.qq,
                })
                    .then((res) => {
                        console.log(res.data.msg);
                        let status = res.data.status;
                        if (status === 1) {
                            this.$message({
                                message: "恭喜您，注册成功, 请联系管理员给你开通",
                                type: "success",
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            },
            toLogin() {
                this.$router.push({name: "Login"});
            },

        },
    };
</script>

<style scoped>
    #container-login {
        background: url("../../assets/img/background_img.png") no-repeat;
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
        text-align: center;
        overflow: hidden;
    }

    #login-label {
        float: left;
        margin-top: 5%;
        margin-left: 35%;
        width: 30%;
        height: 50%;
    }

    #login-label table {
        /* border: 1px red solid; */
        border-radius: 10px;
        /* border: 5px #000 solid; */
        width: 100%;
        text-align: center;
        color: whitesmoke;
        height: 500px;
        padding: 0;
        background: url("../../assets/img/box.png") no-repeat;
        background-size: 100% 500px;
    }
</style>
